<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_员工列表练习</title>
</head>
<body>
<input placeholder="请输入员工姓名" id="name">
<input placeholder="请输入员工工资" id="salary">
<input placeholder="请输入员工岗位" id="job">
<button onclick="add()">添加员工</button>
<hr>
<table border="1px" id="table">
    <caption>员工列表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>岗位</th>
    </tr>
</table>
<script>
    /* 准备数字保存 员工信息*/
    let arr=[];
    function add(){
        let name=document.getElementById('name');
        let salary=document.getElementById('salary');
        let job=document.getElementById('job');
        console.log(name.value+salary.value+job.value);
        /* 创建tr元素 行*/
        let tr=document.createElement('tr');
        /* 创建td元素 列*/
        let td1=document.createElement('td');
        /* 为该列 赋值*/
        td1.innerHTML=name.value;

        let td2=document.createElement('td');
        td2.innerHTML=salary.value;
        let td3=document.createElement('td');
        td3.innerHTML=job.value;
        /* 把td 列 元素放入tr 行 中*/
        tr.append(td1,td2,td3);
        let tableE=document.querySelector('#table');
        /* 将tr 行 元素放入table 表 中*/
        tableE.append(tr);
        /* 装入数组中 方便后期发送请求 存入数据库中*/
        arr.push({
            name:name.value,
            salary:salary.value,
            job:job.value
        })
        console.log(arr);
        /* 清空元素*/
        name.value='';
        salary.value='';
        job.value='';

    }
</script>
</body>
</html>